<template>
  <ContentBox title="课程类别比例" width="100%" height="48%">
    <div ref="moreLoop" class="loopChart"></div>
  </ContentBox>
</template>

<script>
import ContentBox from './contentBox.vue'

export default {
  components: {
    ContentBox,
  },
  data() {
    return {
      moreLoop: null,
      LoopData: [
        {
          name: '公共必修课',
          value: 13211,
        },
        {
          name: '公共选修课',
          value: 13211,
        },
        {
          name: '专业必修课',
          value: 13211,
        },
        {
          name: '公共选修课',
          value: 13211,
        },
        {
          name: '文化素养选修',
          value: 13211,
        },
        {
          name: '教学实践',
          value: 13211,
        },
      ],
    }
  },
  mounted() {
    this.setMoreLoop()
  },
  methods: {
    setMoreLoop() {
      this.moreLoop = this.echarts.init(this.$refs.moreLoop)
      let arrName = this.getArrayValue(this.LoopData, 'name')

      let arrValue = this.getArrayValue(this.LoopData, 'value')
      let sumValue = eval(arrValue.join('+'))
      let objData = this.array2obj(this.LoopData, 'name')
      let optionData = this.getData(this.LoopData, sumValue)

      let option = {
        // backgroundColor: '#ccc',
        legend: {
          show: true,
          left: '0%',
          top: '18%',
          data: arrName,
          itemWidth: 20,
          itemHeight: 10,
          width: 50,
          padding: [0, 5],
          itemGap: 20,
          // formatter: function (name) {
          //   return '{title|' + name + '}\n{value|' + objData[name].value + '人}'
          // },
          textStyle: {
            color: '#90dfda',
            // rich: {
            //   title: {
            //     fontSize: 10,
            //     lineHeight: 10,
            //     color: '#90dfda',
            //   },
            //   value: {
            //     fontSize: 14,
            //     lineHeight: 18,
            //     color: '#90dfda',
            //   },
            // },
          },
        },
        tooltip: {
          show: false,
          trigger: 'item',
          formatter: '{a}<br>{b}:{c}({d}%)',
        },
        color: [
          '#4b78d2',
          '#52adca',
          '#e0c777',
          '#ef9352',
          '#41d3a8',
          '#b3f5fa',
        ],
        grid: {
          top: '20%',
          bottom: '48%',
          left: '30%',
          containLabel: false,
        },
        yAxis: [
          {
            type: 'category',
            // inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              //百分比
              show: false,
              interval: 0,
              inside: true,
              textStyle: {
                color: '#000',
                fontSize: 10,
              },
            },
            data: optionData.yAxis,
          },
        ],
        xAxis: [
          {
            show: false,
          },
        ],
        series: optionData.series,
      }

      this.moreLoop.setOption(option, true)
    },

    getData(data, sumValue) {
      let res = {
        series: [],
        yAxis: [],
      }
      for (let i = 0; i < data.length; i++) {
        res.series.push({
          name: '',
          type: 'pie',
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [60 - i * 10 + '%', 55 - i * 10 + '%'],
          center: ['65%', '55%'],
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 5,
          },
          data: [
            {
              value: data[i].value,
              name: data[i].name,
            },
            {
              value: sumValue - data[i].value,
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        })
        res.series.push({
          name: '',
          type: 'pie',
          silent: true,
          z: 1,
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [60 - i * 10 + '%', 55 - i * 10 + '%'],
          center: ['65%', '55%'],
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 5,
          },
          data: [
            {
              value: 7.5,
              itemStyle: {
                color: 'transparent',
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
            {
              value: 2.5,
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        })
        res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + '%')
      }
      return res
    },

    // 数据过滤
    getArrayValue(array, key) {
      let res = []
      if (array) {
        array.forEach((val) => {
          res.push(val[key])
        })
      }
      return res
    },

    array2obj(array, key) {
      let resObj = {}
      for (let i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i]
      }
      return resObj
    },
  },
}
</script>

<style scoped lang="scss">
.loopChart {
  height: 300px;
  width: 300px;
}
</style>